body {
    background-color: #f2f2f2 !important;
}
.cate-box {
    padding-bottom: .9rem;
}
.search{
    position: relative;
    width: 100%;
    height: .8rem;
    background: linear-gradient(180deg, #FF6040, #FF8A80);
    line-height: .8rem;
    text-align: center;
    input {
        width: 90%;
        height: 80%;
        border-radius: .4rem;
        padding-left: .6rem;
        font-size: 20px;
      
    }
    i {
        font-size: .5rem;
        position: absolute;
        left: .5rem;
        top: -.05rem;
    }
    span {
        position: absolute;
        width: 1rem;
        height: .5rem;
        background-color: #FF6040;
        right: .5rem;
        line-height: .5rem;
        font-size: .2rem;
        border-radius: .3rem;
        transform: translateY(30%);
        color: white;
    }
}
.title {
    width: 100%;
    height: 50px;
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 50px;
    background-color: #FF6040;
    i {
        position: absolute;
        left: .2rem;
        font-size: .5rem;
    }
}
.cate-cont {

    display: flex;
    .cate-cont-ul {
        background-color: #fff;
        flex: 2.5;
        li {
            line-height: 1rem;
            font-size: 16px;
            text-align: center;
            width: 100%;
            height: 1rem;
        }
    }
    .cont-l {
        flex: 8;
        .cont {
            ul {
                li {
                    background-color: #fff;
                    height: 150px;
                    border-radius: 20px;
                    margin-top: 20px;
                    display: flex;
                    .cont-left {
                        flex: 4;
                        height: 100%;
                        line-height: 150px;
                        img {
                            width: 90%;
                            height: 90%;
                        }
                    }
                    .cont-right {
                        display: flex;
                        flex-direction: column;
                        padding: 5px;
                        margin-left: 10px;
                        flex: 7;
                        .p1 {
                            font-size: 16px; 
                            margin-top: .1rem;
                        }
                        .price {
                            flex: 1;
                            position: relative;
                            margin-top: .0rem;
                            display: flex;
                            flex-direction: column;
                            .price-l{
                                span {
                                    font-size: 16px;
                                    color: #FF6040;
                                }
                                p {
                                    margin-bottom: 0;
                                }
                            }
                            .price-r{
                                width: 1.5rem;
                                position: absolute;
                                right: .4rem;
                                bottom: 0;
                                flex: 1;
                                line-height:50px;
                                border-radius: 30px;
                                text-align: center;
                                color: white;
                                font-size: 16px;
                                background: linear-gradient(180deg, #FF6040, #FF8A80);
                            }
                        }
                    }
                }
            }
        }
    }
    .cate {
        color: #FF6040;
    }
  

}